<template>
  <div class="container">
    <template>
      <div class="search_head">
         <div class="search_head_left">
          <el-button type="warning" icon="el-icon-zoom-in" @click="dialogFormVisible = true" style="margin-left:20px" class="btn">高级查找
          </el-button>
          <el-button type="primary" class="btn" @click="dialogFormVisible = true"
             icon="el-icon-circle-plus-outline">供应商</el-button>
         <el-button type="danger" class="btn" @click="open" icon="el-icon-remove-outline">批量删除</el-button></div>
        <div class="search_head_right"> 
          <el-input prefix-icon="el-icon-search" v-model="input" placeholder="请输入内容" style="width:200px" ></el-input>&nbsp;
          <el-button type="success" @click="dialogFormVisible = true" icon="el-icon-search" circle class="btn"></el-button>
        </div>
      </div>
      <!-- <el-button type="primary" class="btn" @click="dialogFormVisible = true"
        icon="el-icon-circle-plus-outline">供应商</el-button>
      <el-button type="danger" class="btn" @click="open" icon="el-icon-remove-outline">批量删除</el-button> -->
      <el-dialog title="添加供应商" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="供应商名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码" :label-width="formLabelWidth">
            <el-input v-model="form.encode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="负责人姓名" :label-width="formLabelWidth">
            <el-input v-model="form.encode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-input v-model="form.encode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="供应商类别" :label-width="formLabelWidth">
            <el-input v-model="form.encode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false; add()">添加</el-button>
        </div>
      </el-dialog>
      <div class="formContainer">
        <el-table :data="tableData" border height="570" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
          <el-table-column type="selection" width="40" fixed="left"></el-table-column>
          <el-table-column prop="id" sortable label="id" width="100" fixed="left">
          </el-table-column>
          <el-table-column prop="supplierName" label="供应商名" width="150">
          </el-table-column>
          <el-table-column prop="supplierEncode" label="编码" width="150">
          </el-table-column>
          <el-table-column prop="name" label="负责人姓名" width="140">
          </el-table-column>
          <el-table-column prop="phoneNumber" label="电话号码" width="150">
          </el-table-column>
          <el-table-column prop="supplierGroup" label="供应商类别" width="110">
          </el-table-column>
          <el-table-column prop="suppliergroup" label="供应商联系地址" width="180">
          </el-table-column>
          <el-table-column prop="addTime" label="添加时间" width="200">
          </el-table-column>
          <el-table-column prop="suppliergroup" label="备注" width="90">
          </el-table-column>
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" circle  @click="handleEdit(scope)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="handleDelete(scope)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination align="center" style="margin: 8px" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="all">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import {
  get_supplier_data,
  handleDelete_supplier_data,
  handleEdit_supplier
  } from '@/api/api.js';
export default {
  data() {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      pageIndex:1,
      pageSize:10,
      form: {
        username: '111',
        password: '111',
        code: '111',
        id: '111',
        encode: '',
        supplier: ''
      }, tableData: []
    }
  },
  mounted(){
    // this.handleSizeChange()
    // this.handleCurrentChange()
    this.get_supplier_data()
  },
  methods:{
    //获取供应商信息
    get_supplier_data(){
     get_supplier_data(this.pageIndex,this.pageSize).then(res=>{
      if(res.data.code == 200){
          console.log(res);
          let por1=[];
          por1=res.data.data.list;
         for(let i=0;i<por1.length;i++){
                   por1[i].addTime=this.dayjs(por1[i].addTime).format("YYYY-MM-DD HH:mm:ss"); 
            }
          console.log(por1,"por1");
          this.tableData = por1
         
      }
      })
    },
    //页面的数据数量
    handleSizeChange(e){
     
      this.pageSize = e;
       this.get_supplier_data()
    },
    //翻页
    handleCurrentChange(e){
      this.pageIndex = e;
       this.get_supplier_data()
    },
    //删除供应商操作
    handleDelete(e){
      let id = e.row.id;
      let supplierName=e.row.supplierName
      handleDelete_supplier_data(id).then(res=>{
        if(res.data.code == 200){

        this.$notify({
          title: '删除成功',
          type: 'success',
          message: supplierName+'供应商已被删除成功！'
        });
          this.get_supplier_data()
          console.log(res.data.msg)
        }
      })
    },
    //编辑供应商操作
    handleEdit(e){
      console.log(e.row)
      handleEdit_supplier(e.row).then(res=>{
        console.log(res)
      })


}

  }
}
</script>

<style lang="less" scoped>
.search_head{
        display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  
    .search_head_left{
       display:flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    }
     .search_head_right{
      margin-right: 15px;
     }
}
.formContainer {
  padding: 10px;
      margin-top: -10px;
}
</style>